<template>
  <view class="page-container">
    <!-- <HeaderBar
        title="交通出行"
		@click="pageBack"
    ></HeaderBar> -->
	<HeaderBar title="交通出行" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
    <view class="page-content">
      <view class="search-container">
        <view class="traffic-title pt30 pb30">{{cartype}}</view>
        <view class="calendar-container">
          <DirectCarSearch :data="carData" @swapdata="swapdata" @serach="serach"></DirectCarSearch>
        </view>
      </view>
      <view class="poi-name">
        {{queryData.param.departurePlace}}-{{queryData.param.destination}}{{cartype}}
      </view>
      <view class="direct-car-product-list-container">
        <view
            class="direct-car-product-item"
            v-for="(item, index) in carList"
            :key="index" 
        >
          <view class="product-name">{{item.name}}</view>
          <view class="introduction-container"><span v-for="(tag,index) in item.tags" :key="index">{{gettags(tag.code)}}<text style="font-size: 20rpx;line-height: 10rpx;margin: 0 10rpx 0 5rpx;" v-if="index != item.tags.length - 1"> | </text></span></view>
          <view class="price-sale-btn-container">
            <view class="price">{{ item.price }}</view>
            <wd-button
              custom-class="sale-btn"
              @click="handleReservationCar(item)"
            >选购</wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {commonWordList} from "@/api/system";
  import HeaderBar from "@/trafficSubPack/components/headerBar/index.vue";
  import DirectCarSearch from "@/trafficSubPack/components/directCarSearch/index.vue";
  import {ref,reactive} from "vue";
  import {onLoad} from "@dcloudio/uni-app";
  import {gettraffic,getprice} from "@/trafficSubPack/api/trafficHome";
  
  const headerBgc = ref("transparent");
  const titleColor = ref("#2D2D2D"); 
	const queryData = reactive({
	  param: {
		carType: 1,
	    recommendMark: '',
        departurePlace: "",
        destination: "", 
		
	  },
	  pageQuery: {
		pageNo: 1,
		pageSize: 10
	  }
	})
	
	const carData = reactive({
		  start:'',
		  end:'',
		  time:'',
		  type:''
	})
	
	const cartype = ref('')
    const carList = ref([])
	
	
	onPageScroll((e) => { 
		if (e.scrollTop > 110) {
			headerBgc.value = "#A7C6AC";
			titleColor.value = "#2D2D2D";
		} else {
			headerBgc.value = "transparent";
			titleColor.value = "#2D2D2D";
		}
	})
	// 获取最低价格并存储到 item 中
	const loadPrices = async () => {
	  for (const item of carList.value) {
		const queryData = reactive({
		  ids: [item.id],
		  type: 2,
		});
		try {
		  const {result} = await getprice(queryData);
		  item.price = result[0].price;
		} catch (error) {
		  item.price = "";
		}
	  }
	};
	
	const tagsData = ref([])
	const queryCommonWordList = async () => {
		await commonWordList({keys:"product_tags"}).then(res => {  
			tagsData.value = res.result.product_tags 
		});
	}; 
	const gettags = (val)=>{ 
		console.log(val);
		return tagsData.value.find(item => item.code == val)?.name;
	}
	onLoad((options) => {
		queryCommonWordList() 
		if(options){ 
		   carData.start = options.start
		   carData.end = options.end
		   carData.time = options.time
		   carData.type = options.carType
		   if (carData.type == 1) {
		       cartype.value = '直通车';
		   } else if (carData.type == 2) {
		       cartype.value = '包车';
		   }
		   
		   queryData.param.departurePlace = options.start
		   queryData.param.destination = options.end
		   queryData.param.carType = options.carType
		} 
		getTraffic()
	});
	
	const serach = (data)=>{ 
		// console.log(data);
		queryData.param.departurePlace = data.start
		queryData.param.destination = data.end
		getTraffic()
	}
	const swapdata = ()=>{ 
		[carData.start, carData.end] = [carData.end, carData.start];
	}
	
	// 列表查询
	const getTraffic = ()=>{ 
	  gettraffic(queryData).then(res=>{
	  	// console.log('热门推荐列表查询',res); 
		carList.value = res.result.records
        // 加载所有价格
        loadPrices();
	  })
	} 
	
	
  const handleReservationCar = (item) => { 
	if(cartype.value == '直通车'){
		uni.navigateTo({
		  url: "/trafficSubPack/pages/directCar/reservationDirectCar?id="+item.id +'&name='+item.routeName +'&routeId='+item.routeId
		})
	} else if(cartype.value == '包车'){
		uni.navigateTo({
		  url:'/trafficSubPack/pages/charteredBusDetail/index?id='+item.id +'&name='+item.routeName +'&routeId='+item.routeId
		})
	}
    
  };
</script>

<style lang="scss" scoped>
  .page-container {
    width: 100%;
    min-height: 100vh;
    background: linear-gradient(180deg, rgba(223,232,213,1) 0%, rgba(237,240,223,1) 10%, rgba(237,240,223,1) 100%);
    .page-content {
      padding: 28rpx;
      .search-container {
        border-radius: 10.5rpx;
        background: #1B9C61;
        .traffic-title {
          font-size: 41.5rpx;
          color: #EEF0DF;
          font-weight: bold;
          text-align: center;
        }
        .calendar-container {
          border-radius: 10.5rpx;
          background: #FFFFFF;
          box-shadow: 0rpx -7rpx 35rpx 0rpx rgba(0,0,0,0.2);
        }
      }
      .poi-name {
        padding:60rpx 0 36rpx 0;
        font-size: 39rpx;
        font-weight: bold;
        color: #333333;
      }
      .direct-car-product-list-container {
        border-radius: 10.5rpx;
        padding: 0 32rpx;
        box-shadow: 0rpx -7rpx 35rpx 0rpx rgba(0,0,0,0.2);
        background: #FFFFFF;
        overflow: hidden;
        .direct-car-product-item {
          padding: 36rpx 0;
          border-bottom: 1rpx solid #EEEFE7;
          .product-name {
            font-size: 29rpx;
            font-weight: bold;
            margin-bottom: 32rpx;
            color: #2B2B24;
          }
          .introduction-container {
            font-size: 19.5rpx;
            color: #777777;
          }
          .price-sale-btn-container {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .price {
              font-size: 41.5rpx;
              font-weight: bold;
              color: #AA5414;
            }
            .price:before {
              content: "￥";
              font-size: 25rpx;
            }
            .price:after {
              content: "起";
              font-size: 25rpx;
              margin-right: 16rpx;
            }
            :deep() {
              .sale-btn {
                border-radius: 10.5rpx;
                padding: 19rpx 24rpx;
                font-size: 33rpx;
                font-weight: bold;
                min-width: 69.5rpx;
                text-align: center;
                color: #FFFFFF;
                background: #AA5414;
                .wd-button__content {
                }
              }
            }
          }
        }
      }
    }
  }
</style>
